<template>
  <div>
    <login-header></login-header>
    <div class="log_bg">
      <div class="top">
        <div class="logo"><a href="Index.html"><img src="@/assets/images/logo.png" /></a></div>
      </div>
      <div class="regist">
        <div class="log_img"><img src="@/assets/images/l_img.png" width="560px" height="425" /></div>
        <div class="reg_c" style="width: 550px;">
          <form>
            <table border="0" style="width:520px; margin-left: 0px; font-size:14px; margin-top:20px;" cellspacing="0"
              cellpadding="0">
              <tr height="50" valign="top">
                <td width="95">&nbsp;</td>
                <td>
                  <span class="fl" style="font-size:24px;">注册</span>
                  <span class="fr">已有商城账号，<a href="#" @click="$router.push('/login')"
                      style="color:#ff4e00;">我要登录</a></span>
                </td>
              </tr>

              <tr height="50">
                <td align="right">
                  <font color="#ff4e00">*</font>&nbsp;用户名 &nbsp;
                </td>

                <td><input type="text" value="" class="l_user" v-model="loginName" @blur="checkLoginName" /></td>
                <td>
                  <sapn style="color: red; font-size: 10px; ">{{ errMsg.loginNameErr }}</sapn>
                </td>
              </tr>

              <tr height="50">
                <td align="right">
                  <font color="#ff4e00">*</font>&nbsp;姓名 &nbsp;
                </td>
                <td><input type="text" value="" class="l_user" v-model="userName" @blur="checkUserName" /></td>
                <td>
                  <sapn style="color: red; font-size: 10px; ">{{ errMsg.userNameErr }}</sapn>
                </td>
              </tr>


              <tr height="50">
                <td align="right">
                  <font color="#ff4e00">*</font>&nbsp;身份证 &nbsp;
                </td>
                <td><input type="text" value="" class="l_user" v-model="identityCode" @blur="checkIdentityCode" /></td>
                <td>
                  <sapn style="color: red; font-size: 10px; ">{{ errMsg.identityCodeErr }}</sapn>
                </td>
              </tr>

              <tr height="50">
                <td align="right">
                  <font color="#ff4e00">*</font>&nbsp;性别 &nbsp;
                </td>
                <td>
                  <input type="radio" value="1" name="sex" v-model="sex" />男
                  <input type="radio" value="0" name="sex" v-model="sex" />女
                </td>
                <td>
                  <sapn style="color: red; font-size: 10px; ">{{ errMsg.sexErr }}</sapn>
                </td>
              </tr>

              <tr height="50">
                <td align="right">
                  <font color="#ff4e00">*</font>&nbsp;密码 &nbsp;
                </td>
                <td><input type="password" value="" class="l_pwd" v-model="password" @blur="checkPassword" /></td>
                <td>
                  <sapn style="color: red; font-size: 10px; ">{{ errMsg.passwordErr }}</sapn>
                </td>
              </tr>

              <tr height="50">
                <td align="right">
                  <font color="#ff4e00">*</font>&nbsp;确认密码 &nbsp;
                </td>
                <td><input type="password" value="" class="l_pwd" v-model="surePassword" @blur="checkSurePassword" />
                </td>
                <td>
                  <sapn style="color: red; font-size: 10px; ">{{ errMsg.surePasswordErr }}</sapn>
                </td>
              </tr>

              <tr height="50">
                <td align="right">
                  <font color="#ff4e00">*</font>&nbsp;手机 &nbsp;
                </td>
                <td><input type="text" value="" class="l_tel" v-model="mobile" @blur="checkMobile" /></td>
                <td>
                  <sapn style="color: red; font-size: 10px; ">{{ errMsg.mobileErr }}</sapn>
                </td>
              </tr>

              <tr height="50">
                <td align="right">
                  <font color="#ff4e00">*</font>&nbsp;邮箱 &nbsp;
                </td>
                <td><input type="text" value="" class="l_email" v-model="email" @blur="checkEmail" /></td>
                <td>
                  <sapn style="color: red; font-size: 10px; ">{{ errMsg.emailErr }}</sapn>
                </td>
              </tr>

              <tr height="50">
                <td align="right">
                  <font color="#ff4e00">*</font>&nbsp;验证码 &nbsp;
                </td>
                <td>
                  <input type="text" value="" class="l_ipt" v-model="code" />
                  <button
                    style="background-color: #ff4e00;width: 120px; height: 40px;color: white;border: none;margin-left: 30px;text-align:center;line-height: 40px;"
                    @click.prevent="sendEmail">
                    {{ codeMsg }}
                  </button>
                </td>
                <td>
                  <sapn style="color: red; font-size: 10px; ">{{ errMsg.codeErr }}</sapn>
                </td>
              </tr>
              <!-- <tr>
                <td>&nbsp;</td>
                <td style="font-size:12px; padding-top:20px;">
                  <span style="font-family:'宋体';" class="fl">
                    <label class="r_rad"><input type="checkbox" /></label><label class="r_txt">我已阅读并接受《用户协议》</label>
                  </span>
                </td>
              </tr> -->
              <tr height="60">
                <td>&nbsp;</td>
                <td><input type="button" value="立即注册" class="log_btn" @click="regist()" /></td>
              </tr>
            </table>
          </form>
        </div>
      </div>
    </div>
    <footer-down></footer-down>
  </div>
</template>

<script>
import FooterDown from '@/components/FooterDown.vue';
import LoginHeader from '@/components/LoginHeader.vue';
import { mapMutations } from 'vuex'
export default {
  components: { FooterDown, LoginHeader },
  name: 'RegistView',
  data() {
    return {
      loginName: '',
      userName: '',
      password: '',
      surePassword: '',
      email: '',
      mobile: '',
      code: '',
      isCounting: false,
      countDown: 120,
      timer: null,
      codeMsg: '获取验证码',
      identityCode: '',
      sex: '',
      errMsg: {
        loginNameErr: '',
        userNameErr: '',
        passwordErr: '',
        surePasswordErr: '',
        mobileErr: '',
        emailErr: '',
        identityCodeErr: '',
        sexErr: '',
        codeErr: ''
      },
      flag: {
        loginNameFlag: false,
        userNameFlag: false,
        passwordFlag: false,
        surePasswordFlag: false,
        mobileFlag: false,
        emailFlag: false,
        identityCodeFlag: false,
        sexFlag: false,
        codeFlag: false
      }

    }
  },
  methods: {
    ...mapMutations(['setShowPage']),

    regist() {
      this.checkEmail()
      this.checkLoginName()
      this.checkUserName()
      this.checkIdentityCode()
      this.checkPassword()
      this.checkSurePassword()
      this.checkMobile()
      this.checkSex()
      this.checkCode()
      let flag = this.flag.codeFlag && this.flag.emailFlag && this.flag.mobileFlag && this.flag.identityCodeFlag
        && this.flag.loginNameFlag && this.flag.passwordFlag && this.flag.surePasswordFlag && this.flag.sexFlag && this.flag.userNameFlag
      if (flag) {
        this.$axios({
          url: '/addUser',
          method: 'post',
          data: {
            loginName: this.loginName,
            userName: this.userName,
            password: this.surePassword,
            mobile: this.mobile,
            email: this.email,
            identityCode: this.identityCode,
            sex: this.sex
          },
          headers: {
            'content-type': 'application/json'
          }
        }).then(rs => {
          if (rs.data.code == 5200 || rs.data.code == "5200") {
            alert('注册成功!')
            this.$router.push('/')
          } else {
            alert('注册失败！')
          }
        })
      }

    },

    checkLoginName() {

      if (this.loginName == '') {
        this.flag.loginNameFlag = false
        this.errMsg.loginNameErr = '用户名不能为空！'
      } else {
        this.$axios({
          url: '/checkLoginName',
          method: 'get',
          params: { loginName: this.loginName }
        }).then(rs => {
          if (rs.data.code == 5200 || rs.data.code == "5200") {
            this.flag.loginNameFlag = true
            this.errMsg.loginNameErr = ''
          } else {
            this.flag.loginNameFlag = false
            this.errMsg.loginNameErr = '用户名重复！'
          }
        })
      }
    },
    checkSex() {
      if (this.sex == '') {
        this.errMsg.sexErr = '请选择性别！'
        this.flag.sexFlag = false
      } else {
        this.errMsg.sexErr = ''
        this.flag.sexFlag = true
      }
    },
    checkUserName() {
      if (this.userName == '') {
        this.errMsg.userNameErr = '姓名不能为空！'
        this.flag.userNameFlag = false
      } else {
        this.errMsg.userNameErr = ''
        this.flag.userNameFlag = true
      }
    },
    checkIdentityCode() {
      if (this.identityCode == '') {
        this.errMsg.identityCodeErr = '身份证不能为空！'
        this.flag.identityCodeFlag = false
        return
      }
      if (this.identityCode.length != 18) {
        this.errMsg.identityCodeErr = '身份证长度18位！'
        this.flag.identityCodeFlag = false
      } else {
        this.$axios({
          url: 'checkIdentityCode',
          method: 'get',
          params: { identityCode: this.identityCode }
        }).then(rs => {
          if (rs.data.code == 5200 || rs.data.cdoe == '5200') {
            this.flag.identityCodeFlag = true
            this.errMsg.identityCodeErr = ''
          } else {
            this.flag.identityCodeFlag = false
            this.errMsg.identityCodeErr = '身份证重复！'
          }
        })
      }
    },

    checkPassword() {

      if (this.password == '') {
        this.errMsg.passwordErr = '密码不能为空！'
        this.flag.passwordFlag = false
        return
      }
      if (this.password.length > 9 || this.password.length < 6) {
        this.errMsg.passwordErr = '密码长度不对！'
        this.flag.passwordFlag = false
        return
      }
      this.errMsg.passwordErr = ''
      this.flag.passwordFlag = true

    },
    checkSurePassword() {

      if (this.surePassword == '') {
        this.errMsg.surePasswordErr = '确认密码不能为空！'
        this.flag.surePasswordFlag = false
        return
      }
      if (this.surePassword.length > 9 || this.surePassword.length < 6) {
        this.errMsg.surePasswordErr = '确认密码长度不对！'
        this.flag.surePasswordFlag = false
        return
      }

      if (this.surePassword == this.password) {
        this.errMsg.surePasswordErr = ''
        this.flag.surePasswordFlag = true
      } else {
        this.errMsg.surePasswordErr = '两次密码输入不匹配！'
        this.flag.surePasswordFlag = false
      }
    },


    checkMobile() {
      if (this.mobile == '') {
        this.errMsg.mobileErr = '手机号不能为空！'
        this.flag.mobileFlag = false
        return
      }
      const pattern = /^1[357]\d{9}$/
      if (!pattern.test(this.mobile)) {
        this.errMsg.mobileErr = '手机号格式不对！'
        this.flag.mobileFlag = false
        return
      } else {
        this.$axios({
          url: '/checkMobile',
          method: 'get',
          params: { mobile: this.mobile }
        }).then(rs => {
          if (rs.data.code == 5200 || rs.data.code == "5200") {
            this.errMsg.mobileErr = ''
            this.flag.mobileFlag = true
          } else {
            this.errMsg.mobileErr = '手机号重复！'
            this.flag.mobileFlag = false

          }
        })
      }
    },
    checkEmail() {
      if (this.email == '') {
        this.errMsg.emailErr = '邮箱不能为空！'
        this.flag.emailFlag = false
        return
      }
      const partten = /^[^\s@]+@[^\s@]+.[^\s@]+$/
      if (!partten.test(this.email)) {
        this.errMsg.emailErr = '邮箱格式不对！'
        this.flag.emailFlag = false
        return
      }
      else {
        this.$axios({
          url: '/checkEmail',
          method: 'get',
          params: { email: this.email }
        }).then(rs => {
          if (rs.data.code == 5200 || rs.data.code == "5200") {
            this.errMsg.emailErr = ''
            this.flag.emailFlag = true
          } else {
            this.errMsg.emailErr = '邮箱重复！'
            this.flag.emailFlag = false
          }
        })
      }
    },
    sendEmail() {
      if (this.isCounting == true) {
        return
      }
      this.$axios({
        url: '/sendEmail',
        method: 'get',
        params: { email: this.email }
      }).then(rs => {
        if (rs.data.code == 5200 || rs.data.code == "5200") {
          alert('验证码已发送！')
          this.startCountdown()
          this.check = true
        } else {
          alert('验证码发送失败！')
          this.check = false
        }
      })
    },

    checkCode() {
      if (this.code == '') {
        this.errMsg.codeErr = '请输入验证码！'
        this.flag.codeFlag = false
      } else {
        this.$axios({
          url: '/checkCode',
          method: 'get',
          params: { code: this.code }
        }).then(rs => {
          if (rs.data.code == 5200 || rs.data.code == "5200") {
            this.errMsg.codeErr = ''
            this.flag.codeFlag = true
          } else {
            this.errMsg.codeErr = '验证码错误！'
            this.flag.codeFlag = false
          }
        })
      }
    },

    startCountdown() {
      this.isCounting = true;
      this.countdown = 120;

      this.timer = setInterval(() => {
        this.countdown--;
        this.codeMsg = `${this.countdown}秒后重新获取`;
        if (this.countdown <= 0) {
          this.stopCountdown();
        }
      }, 1000);
    },

    stopCountdown() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
      this.isCounting = false;
      this.codeMsg = '获取验证码';
      this.setShowPage(1)
    }
  },
  mounted() {
    this.setShowPage(1)
  }

}

</script>

<style></style>